<template>
  <div class="container">
    <NavBar title="我的影票"></NavBar>
    <div class="ticket">
      <div class="header">
        <div class="left">
          <p class="title">只有你</p>
          <p class="text">今天 5-8 12:00-13:56 （英语3D）</p>
          <p class="text">万达影城 （云龙店）</p>
          <p class="text">1号激光厅 7排12座 7排13座</p>
        </div>
        <div class="right">
          <img src="@/assets/images/user/post.png" alt="" />
        </div>
        <div class="divide"></div>
      </div>
      <div class="middle">
        <div class="top">
          <div class="text">取票码</div>
          <div class="number">
            284856992589858F
          </div>
          <div class="price">
            24元
          </div>
        </div>
        <div class="qrcode">
          <img src="@/assets/images/user/QRcode.png" alt="" />
        </div>
      </div>
      <div class="bottom">
        <div class="address">
          <p>万达影城 （云龙店）</p>
          <p class="text">地址：云龙区万达广场3层</p>
        </div>
        <div class="tel">
          <p>1.3km</p>
          <img src="@/assets/images/user/phone.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar.vue'
export default {
  components: {
    NavBar,
  },
}
</script>

<style lang="scss" scoped>
.NavBar {
  font-size: 40px;
}
.ticket {
  margin: 0 auto;
  margin-top: 140px;
  width: 640px;
  height: 998px;
  background-image: url('~@/assets/images/user/bg3.png');
  background-size: 640px 998px;
  overflow: hidden;

  .header {
    position: relative;
    display: flex;
    width: 640px;
    height: 337px;

    .left {
      width: 442px;
      height: 228px;
      margin-top: 46px;
      padding-left: 46px;
      p {
        font-size: 36px;
        color: #3a3a3a;
        margin-bottom: 10px;
      }
      .text {
        margin-top: 20px;
        opacity: 0.74;
        font-size: 24px;
        color: #3a3a3a;
      }
    }

    .right {
      width: 156px;
      height: 228px;
      margin-right: 42px;
      margin-top: 36px;

      img {
        width: 156px;
        height: 228px;
      }
    }

    .divide {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 535px;
      height: 1px;
      border-bottom: 2px dotted #979797;
    }
  }

  .middle {
    width: 100%;
    height: 480px;

    .top {
      display: flex;
      justify-content: space-evenly;
      width: 100%;
      height: 42px;
      margin-top: 50px;
      font-size: 32px;
      line-height: 48px;
      color: #3a3a3a;

      .text {
        width: 100px;
        font-weight: bold;
      }

      .number {
        font-size: 34px;
        width: 284px;
        height: 44px;
        padding: 2px 30px;
        border: 2px solid rgba(151, 151, 151, 0.39);
        border-radius: 6px;
        transform: translateX(-10px);
      }

      .price {
        font-weight: bold;
        width: 70px;
      }
    }

    .qrcode {
      position: relative;

      img {
        margin: 0 auto;
        width: 324px;
        height: 324px;
        margin-top: 36px;
      }

      &::after {
        content: '2 张电影票';
        position: absolute;
        opacity: 0.61;
        font-size: 26px;
        color: #3a3a3a;
        bottom: -60px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }

  .bottom {
    display: flex;
    width: 100%;
    height: 183px;
    padding: 24px 46px;
    border-top: 2px dotted #979797;
    font-size: 28px;
    color: #3a3a3a;

    .address {
      width: 75%;

      .text {
        font-size: 24px;
        color: #3a3a3a;
        margin-top: 10px;
      }
    }

    .tel {
      font-size: 32px;
      color: #3a3a3a;

      img {
        width: 36px;
        height: 38px;
        transform: translateX(20px);
      }
    }
  }
}
</style>
